import { lishuiMap } from "./lishui.js";

import { jingningMap } from "../data/jingning.js";
import { jinyunMap } from "../data/jinyun.js";
import { lianduMap } from "../data/liandu.js";
import { longquanMap } from "../data/longquan.js";
import { qingtianMap } from "../data/qingtian.js";
import { qingyuanMap } from "../data/qingyuan.js";
import { songyangMap } from "../data/songyang.js";
import { suichangMap } from "../data/suichang.js";
import { yunheMap } from "../data/yunhe.js";

// console.log(mapdata);
let myChart;
let mapIntervel;
function mapChart(echarts, idStr, mapname = "丽水市", mapdata = lishuiMap) {
  echarts.registerMap(mapname, mapdata);
  // console.log(mapdata);
  myChart = echarts.init(document.getElementById(idStr));

  //获取中心点对象数组，key为区域名称，value为中心点坐标[{'区域名'，'区域中心点坐标'}]
  let centerMap = {};
  if (mapdata && mapdata.features && mapdata.features.length > 0) {
    for (var i = 0; i < mapdata.features.length; i++) {
      var feature = mapdata.features[i];
      var properties = feature.properties || {};
      if (properties && properties.name) {
        centerMap[properties.name] =
          properties.centroid || properties.center || [];
      }
    }
  }
  //将中心点对象数组处理成name和value字段的对象数组[{name：区域名，value：区域中心点坐标}]
  let convertData = function () {
    let res = [];
    for (let key in centerMap) {
      const value = centerMap[key];
      res.push({
        name: key,
        value: value
      });
    }
    return res;
  };

  let mapData = convertData();

  option = {
    backgroundColor: "transparent",
    geo: {
      map: mapname,
      aspectScale: 1, //长宽比
      zoom: 1,
      roam: false,
      itemStyle: {
        normal: {
          areaColor: "#2e59cc",
          shadowColor: "#182f68",
          shadowOffsetX: 0,
          shadowOffsetY: 10
        },
        emphasis: {
          areaColor: "#2AB8FF",
          borderWidth: 0,
          color: "green",
          label: {
            show: false
          }
        }
      }
    },
    series: [
      {
        type: "map",
        aspectScale: 1,
        roam: true,
        label: {
          show: false
        },
        itemStyle: {
          normal: {
            borderColor: "#2ab8ff",
            borderWidth: 1,
            areaColor: "#2e59cc"
          },
          emphasis: {
            borderWidth: 0,
            color: "green",
            label: {
              show: false
            }
          }
        },
        zoom: 1,
        roam: false,
        map: mapname,
        data: mapData
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        itemStyle: {
          color: "#00FFF6"
        },
        symbol: img,
        symbolSize: [44*fontSize(0.01), 33*fontSize(0.01)],
        symbolOffset: [0, 0],
        z: 999,
        data: mapData
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              var name = params.name;
              var text = `${name}`;
              return text;
            },
            color: '#fff',
            fontSize:fontSize(0.15),
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          color: "#00FFF6"
        },
        symbol: img2,
        symbolSize: [100*fontSize(0.01), 40*fontSize(0.01)],
        symbolOffset: [0, -35],
        z: 999,
        data: mapData
      }
    ]
  };
  myChart.setOption(option, true);

  let index = -1;
  if (mapdata.name !== "丽水市" || mapIntervel) {
    clearInterval(mapIntervel);
  }
  mapIntervel = setInterval(function () {
    // 取消高亮指定的数据图形
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: index
    });
    // 高亮指定的数据图形
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: index + 1
    });

    index++;
    // 获取当前数据
    // console.log(mapData[index])

    if (index > Object.keys(centerMap).length) {
      index = -1;
    }
  }, 5000);
}
setTimeout(() => {
  mapChart(echarts, "map");
}, 500);

myChart.on("mouseover", "series", function (data) {
  // 获取鼠标滑动数据，有name
  // console.log(data)
});

myChart.on("click", "series", function (data) {
  clearInterval(mapIntervel);
  // backEle.style.display = 'block';
  // 获取鼠标点击数据，有name
  let subMapName = data.name;
  console.log(subMapName);
  switch(subMapName){
    case '缙云县':
      mapChart(echarts, "map",'缙云县',jinyunMap);
      break;
    case '景宁畲族自治县':
      mapChart(echarts, "map",'景宁畲族自治县',jingningMap);
      break;
    case "莲都区":
      mapChart(echarts, "map", "莲都区", lianduMap);
      break;
    case "龙泉市":
      mapChart(echarts, "map", "龙泉市", longquanMap);
      break;
    case "青田县":
      mapChart(echarts, "map", "青田县", qingtianMap);
      break;
    case "庆元县":
      mapChart(echarts, "map", "庆元县", qingyuanMap);
      break;
    case "松阳县":
      mapChart(echarts, "map", "松阳县", songyangMap);
      break;
    case "遂昌县":
      mapChart(echarts, "map", "遂昌县", suichangMap);
      break;
    case '云和县':
      mapChart(echarts, "map",'云和县',yunheMap);
      break;
    default:
      break;
  }
  backElement.css("display", "block");
});

let backElement = $("#backBtn");

backElement.bind("click", function (event) {
  mapChart(echarts, "map", "丽水市", lishuiMap);
  backElement.css("display", "none");
  event.stopImmediatePropagation(); //阻止除此以外的其他元素事件冒泡
});

// 自适应echarts的函数
function fontSize(res) {
  // alert(111);
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 1920);
  // console.log(fontSize);
  // console.log(res * fontSize);
  return res * fontSize;
}
